// import puff from '../assets/svg-loaders/puff.svg'
// import audio from '../assets/svg-loaders/audio.svg'

// import ballTriangle from '../assets/svg-loaders/ball-triangle.svg'
// import bars from '../assets/svg-loaders/bars.svg'
// import circles from '../assets/svg-loaders/circles.svg'
// import grid from '../assets/svg-loaders/grid.svg'
// import hearts from '../assets/svg-loaders/hearts.svg'
import oval from '../assets/svg-loaders/oval.svg'
// import rings from '../assets/svg-loaders/rings.svg'
// import spinningCircles from '../assets/svg-loaders/spinning-circles.svg'
// import tailSpin from '../assets/svg-loaders/tail-spin.svg'
// import threeDots from '../assets/svg-loaders/three-dots.svg'

export default {
  tpl: "<div style='width: 100px;height: 100px;background-color: rgba(0, 0, 0, 0.5);color:#fff;border-radius:15px'><img src='" + oval + "' style='margin-top: 20px;width:40px'><p style='margin-bottom:20px;font-size:12px'>正在加载...</p></div>",
  install(Vue) {
    Vue.prototype.$loading = this;
    Vue.loading = this;

    this.count = 0;
    this.div;
  },
  init(options) {

  },
  show() {
    this.count++;
    if (!!this.div) {
      return
    }

    let fragment = document.createDocumentFragment()
    this.div = document.createElement('div')
    this.div.style.position = 'fixed'
    this.div.style.width = '100%'
    this.div.style.height = '100%'
    this.div.style.top = '0'
    this.div.style.textAlign = 'center'
    this.div.style.zIndex = 999999
    this.div.style.display = 'flex'
    this.div.style.justifyContent = 'center'
    this.div.style.alignItems = 'center'
    this.div.innerHTML = this.tpl
    fragment.appendChild(this.div)
    setTimeout(()=>{
      document.body.appendChild(fragment)
    },300)
  },
  hide() {
    this.count--;
    if (this.count == 0) {
      setTimeout(() => {
        this.div && this.div.remove()
        this.div = undefined
      }, 300)
    }
  }
}
